<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>简单导航菜单</title>
<style>
body{
font-family:微软雅黑}
.nav{display:inline-block;
background-color:#5598b6;margin:20px;}
span{
display:inline-block;
width:80px;
height:40px;
line-height:40px;
cursor:pointer;
background-color:transparent;
text-align:center;
color:#FFFFFF}
.active{
background-color:#e36885;
color:#FFFFFF;}
</style>
<script src="../JS/vue.js"></script>
</head>
<body>
<div id="example">
	<my-menu @select-item="onSelectItem" :flag="flag"></my-menu>
</div>
<script type="text/javascript">
//注册全局组件
Vue.component('my-menu', {
	props : ['flag'],
	template : '<div class="nav"> \
  		<span @click="select(1)" :class="{active: flag===1}">音乐</span> \
  		<span @click="select(2)" :class="{active: flag===2}">体育</span> \
  		<span @click="select(3)" :class="{active: flag===3}">影视</span> \
		<span @click="select(4)" :class="{active: flag===4}">图片</span> \
 	  </div>',
  	methods: {
    	select (value) {
      		this.$emit('select-item', value)
   		}
  	}
})
//创建根实例
var vm = new Vue({
	el:'#example',
	data: {
        flag : 1
    },
  	methods: {
   		onSelectItem : function(value){
    		this.flag = value
   		}
  	}
})
</script>


</body>

</html>



